<template>
    <div class="storageType">
        <van-nav-bar title="出库类型" left-arrow @click-left="handleLeft">
        </van-nav-bar>
        <div v-for="(item, index) in storageTypeList" :key="index" @click="storageTypeClcik(index)"
            :class="storageTypeIndex == index ? 'storageType_item_active' : 'storageType_item'">
            {{ item }}
            <van-image :src="xuanzhong" v-if="storageTypeIndex == index"></van-image>
        </div>

    </div>
</template>

<script setup lang="ts">
import { showFailToast } from 'vant';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const xuanzhong = new URL("@/assets/productHome/icon_xuanzhong.png", import.meta.url).href;
const storageTypeList = ref([
    '主播选品出库',
    '审核部门出库'
    // '退还供应商出库',
    // '盘亏出库',
    // '废弃出库',
    // '其他出库'
])
/** 商品详情传过来的商品 */
const detailInfo = computed(() => {
    return route.query.detailInfo;
});
/** 判断上一级路由地址 */
const fromRoute = computed(() => {
    return route.query.from;
});
const storageTypeIndex = ref()
const storageTypeClcik = (index: number) => {
    // 下架得不能出库主播
    if (detailInfo.value && JSON.parse(detailInfo.value as any).shelvesStatus == 3) {
        showFailToast('已下架商品不能选品出库')
    } else {
        storageTypeIndex.value = index
        // 这期只做主播选品出库
        if (index == 0) {
            setTimeout(() => {
                router.push({
                    path: '/selectAnchor',
                    query: {
                        index,
                        detailInfo: detailInfo.value
                    }
                })
            }, 200)
        }else{
            setTimeout(() => {
                router.push({
                    path: '/selectAnchor',
                    query: {
                        index: 2,
                        detailInfo: detailInfo.value
                    }
                })
            }, 200)
        }
    }
}
/** 回退 */
const handleLeft = () => {
    if (fromRoute.value == 'productHomeDetail') {
        router.back()
    } else {
        router.push('/productHome')
    }
}
</script>
<style lang="less" scoped>
.storageType {
    height: calc(100vh - 90px);
    width: 100%;
    background-color: #fff;

    .van-image {
        width: 15px;
        height: 15px;
    }

    .storageType_item {
        width: 100%;
        height: 56px;
        box-sizing: border-box;
        padding: 0 15px;
        background-color: #fff;
        font-weight: 400;
        font-size: 16px;
        color: #1A1B1C;
        line-height: 56px;
    }

    .storageType_item_active {
        width: 100%;
        height: 56px;
        box-sizing: border-box;
        padding: 0 15px;
        background: #F6FAFF;
        font-weight: 400;
        font-size: 16px;
        color: #0094FF;
        line-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>